<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{title}}</h2>
			<!-- 4. 在调用子组件的位置，使用自定义属性的方式发送数据 -->
			<my-temp :msg="msg"></my-temp>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<!-- 1. 创建组件模板 -->
	<template id="temp">
		<div>
			<p>这是{{name}}组件</p>
			<p>{{msg}}</p>
		</div>
	</template>
	
	<script type="text/javascript">
		// 2. 创建子组件对象
		let temp = {
			template:"#temp",
			data:()=>{
				return {
					name:"子 - a"
				}
			},
			// 5. 在对应的子组件对象内,使用props接收父组件传过来的数据
			props:["msg"]
		}
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"组件之间的传值-父传子",
				msg:"来自父组件的数据 - hello"
			},
			// 3. 注册组件
			components:{
				// "my-temp":temp
				myTemp:temp
			}
		});
		
	</script>
</html>
